<template>
  <view class="addressList">
    <view class="address-item" v-for="(v, i) in addressList" :key="i" @click="toAddressDetail(v)">
      <view class="title">
        <text class="nickname">{{ v.nickname }}</text>
        <text class="tel">{{ v.tel }}</text>
      </view>
      <view class="address">
        {{ v.address }}
      </view>
    </view>
    <button type="primary" @click="handleAdd">添加数据</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        addressList: []
      }
    },
    methods: {
      async getAddressList() {
        const [error, resp] = await uni.request({
          url: 'http://localhost:3000/addressList',
        })
        if (error) {
          console.log('请求地址报错')
          return;
        }
        this.addressList = resp.data
      },
      toAddressDetail(v) {
        uni.navigateTo({
          url: `/pages/address-detail/address-detail?id=${v.id}&type=edit`
        })
      },
      handleAdd() {
        uni.navigateTo({
          url: `/pages/address-detail/address-detail?type=add`
        })
      }
    },
    onShow() {
      this.getAddressList()
    }
  }
</script>

<style lang="scss" scoped>
  .address-item {
    padding: 20px;
    border: 1px solid #ccc;
    margin: 10px 0;
    border-radius: 20px;

    .title {
      display: flex;
      justify-content: space-between
    }
  }
</style>
